<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no">
    <title>Scrum Task Board | CORK - Multipurpose Bootstrap Dashboard Template </title>
    <!-- BEGIN GLOBAL MANDATORY STYLES -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700" rel="stylesheet">
    <link href="{{ asset('assets/backend/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('assets/backend/assets/css/plugins.css') }}" rel="stylesheet" type="text/css" />
    <!-- END GLOBAL MANDATORY STYLES -->
    <link href="{{ asset('assets/fonts/fontawesome/font-awesome.min.css') }}" rel="stylesheet">
    <!-- BEGIN PAGE LEVEL STYLES -->
    <link href="{{ asset('assets/backend/assets/css/apps/mailing-chat.css') }}" rel="stylesheet" type="text/css" />
    <!-- END PAGE LEVEL STYLES -->
</head>
<body>

<!-- CONTENT BOX -->
<div class="layout-px-spacing">

    <div class="chat-section layout-top-spacing">
        <div class="row">
            <div class="col-xl-12 col-lg-12 col-md-12">
                <div class="chat-system">
                    <div class="user-list-box">
                        <div class="people">

                            <div class="person" data-chat="person1">
                                <div class="user-info">
                                    <div class="f-head">
                                        <img src="{{ asset('assets/backend/assets/img/90x90.jpg') }}" alt="avatar">
                                    </div>
                                    <div class="f-body">
                                        <div class="meta-info">
                                            <span class="user-name" data-name="Nia Hillyer">Nia Hillyer</span>
                                            <span class="user-meta-time">2:09 PM</span>
                                        </div>
                                        <span class="preview">How do you do?</span>
                                    </div>
                                </div>
                            </div>

                            <div class="person" data-chat="person2">
                                <div class="user-info">
                                    <div class="f-head">
                                        <img src="{{ asset('assets/backend/assets/img/90x90.jpg') }}" alt="avatar">
                                    </div>
                                    <div class="f-body">
                                        <div class="meta-info">
                                            <span class="user-name" data-name="Sean Freeman">Sean Freeman</span>
                                            <span class="user-meta-time">2:09 PM</span>
                                        </div>
                                        <span class="preview">I was wondering...</span>
                                    </div>
                                </div>
                            </div>

                            <div class="person" data-chat="person3">
                                <div class="user-info">
                                    <div class="f-head">
                                        <img src="{{ asset('assets/backend/assets/img/90x90.jpg') }}" alt="avatar">
                                    </div>
                                    <div class="f-body">
                                        <div class="meta-info">
                                            <span class="user-name" data-name="Alma Clarke">Alma Clarke</span>
                                            <span class="user-meta-time">1:44 PM</span>
                                        </div>
                                        <span class="preview">I've forgotten how it felt before</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="chat-box">
                        <div class="chat-box-inner">
                            <div class="chat-meta-user">
                                <div class="current-chat-user-name"><span><img src="{{ asset('assets/backend/assets/img/90x90.jpg') }}" alt="dynamic-image"><span class="name"></span></span></div>

                                <div class="chat-action-btn align-self-center">
                                    <div class="dropdown d-inline-block">
                                        <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink-2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <i class="fa fa-ellipsis-v"></i>
                                        </a>

                                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink-2">
                                            <a class="dropdown-item" href="javascript:void(0);">
                                                <i class="fa fa-close"></i> 关闭当前聊天
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="chat-conversation-box">
                                <div id="chat-conversation-box-scroll" class="chat-conversation-box-scroll">
                                    <div class="chat" data-chat="person1">
                                        <div class="conversation-start">
                                            <span>Today, 6:48 AM</span>
                                        </div>
                                        <div class="bubble you">
                                            Hello,
                                        </div>
                                        <div class="bubble you">
                                            It's me.
                                        </div>
                                        <div class="bubble you">
                                            I have a question regarding project.
                                        </div>
                                    </div>
                                    <div class="chat" data-chat="person2">
                                        <div class="conversation-start">
                                            <span>Today, 5:38 PM</span>
                                        </div>
                                        <div class="bubble you">
                                            Hello!
                                        </div>
                                        <div class="bubble me">
                                            Hey!
                                        </div>
                                        <div class="bubble me">
                                            How was your day so far.
                                        </div>
                                        <div class="bubble you">
                                            It was a bit dramatic.
                                        </div>
                                    </div>
                                    <div class="chat" data-chat="person3">
                                        <div class="conversation-start">
                                            <span>Today, 3:38 AM</span>
                                        </div>
                                        <div class="bubble me">
                                            Hey Buddy.
                                        </div>
                                        <div class="bubble me">
                                            What's up
                                        </div>
                                        <div class="bubble you">
                                            I am sick
                                        </div>
                                        <div class="bubble you">
                                            Not comming to office today.
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="chat-footer">
                                <div class="chat-input">
                                    <form class="chat-form" action="javascript:void(0);">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-square"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
                                        <input type="text" class="mail-write-box form-control" placeholder="Message"/>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

</div>
<!-- CONTENT BOX -->

<!-- BEGIN GLOBAL MANDATORY SCRIPTS -->
<!-- BEGIN GLOBAL MANDATORY SCRIPTS -->
<script src="{{ asset('assets/backend/assets/js/libs/jquery-3.1.1.min.js') }}"></script>
<script src="{{ asset('assets/backend/bootstrap/js/popper.min.js') }}"></script>
<script src="{{ asset('assets/backend/bootstrap/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('assets/backend/plugins/perfect-scrollbar/perfect-scrollbar.min.js') }}"></script>
<script src="{{ asset('assets/backend/assets/js/app.js') }}"></script>

<script>
    $(document).ready(function () {
        App.init();
    });
</script>
<script src="{{ asset('assets/backend/assets/js/custom.js') }}"></script>
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="{{ asset('assets/backend/assets/js/apps/mailbox-chat.js') }}"></script>
<!-- END PAGE LEVEL SCRIPTS -->
</body>
</html>
